<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>气象站</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">

    <script src="js/highcharts.js"></script>
    <script src="js/modules/exporting.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>-->
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/moment.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        var btn_index = 1;
        var d_id = 1;
        var x;
        var y;
        $(function () {
            $("#dt").datetimebox("setValue", moment().format("YYYY-MM-DD HH:mm:00"));

            $("#sel").change(function () {
                chart_ref();
            });
            $("#sel2").change(function () {
                chart_ref();
            });
            btn_click(5);

            var key = getUrlParam('key');
            if (key != null) {
                $("#div_del").show();
            } else {
                $("#div_del").hide();
            }
        });

        function show_chart(lab, dat, tit, unit, div) {
            var u = ['', '°C', '%', '°C', 'MPa', 'lux', '°C', '%', '°C'];
            var opt = {
                chart: {
                    renderTo: div,
                    type: 'line',
                    zoomType: 'x'
                },
                title: {
                    text: tit, //'树莓派气象站',
                    x: -20 //center
                },
                colors: ['#EE7600', '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
                subtitle: {
                    text: 'w_p_ <?php echo date("Y-m-d H:i:s") ?>',
                    x: -20
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories: lab,
                    tickInterval: Math.round(lab.length / 10) // 10
                },
                yAxis: {
                    title: {
                        text: tit//'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: unit // '°C'
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function (event) {
                                x = event.point.category;
                                y = event.point.y;
                                if($("#chk2").prop("checked"))
                                    y = '' + y + $("#txt1").val();

                                $("#result").html("<b>Result : index = " + event.point.x + " , series = " + this.name + ', x = ' + x + ' ,y = ' + y + "</b>");
                                //alert('index = '+ event.point.x+ 'x = '+event.point.category+' ,y = '+event.point.y);
                                //alert($("#chk1").val());
                                if($("#d_s").val() != '' && $("#d_e").val() != '') {
                                    $("#d_s").val("");
                                    $("#d_e").val("");
                                }
                                if($("#d_s").val() == '') {
                                    $("#d_s").val(x);
                                }
                                else {
                                    $("#d_e").val(x);
                                }
                                
                                if ($("#chk1").prop("checked")) {
                                    btn_del_click();
                                }
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: tit, //'ds12b80温度',
                    //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    data: dat
                }]
            }
            dataChart = new Highcharts.Chart(opt);
        }

        function btn_t(i) {
            if (i == 99) {
                var dt2 = new moment();
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));                
            } else {               
                var t_add = $("#sel2").find("option:selected").val();
                var dt1 = $("#dt").datetimebox("getValue");
                var dt2 = new moment(dt1);
                var i_t = i * Number(t_add);
                dt2 = dt2.add(i_t, "hours");
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));
            }
            chart_ref();
        }

        function btn_click(i) {
            btn_index = Number(i);
            chart_ref();
        }
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }

        function btn_del_click() {
            var t = x;
            var v = y;
            var key = getUrlParam('key');
            t = t.replace(' ', 'T');
            //alert(t);
            //alert(v);
            $.get("main.php", {cmd: 'deleteline', t: t, v: v, key: key, id_temp: Math.random()}, function (data) {
                alert(data);
            })
        }
        
        function btn_cls_click() {
            $("#d_s").val("");
            $("#d_e").val("");
        }
        
        function btn_sel_click() {
            var id = $("#sel").find("option:selected").val();
            var dt = $("#dt").datetimebox("getValue");
            var tit = $("#sel").find("option:selected").attr("oth");
            var key = $("#sel").find("option:selected").attr("key");
            var mac = $("#sel").find("option:selected").attr("mac");
            var unit = $("#sel").find("option:selected").attr("unit"); 
            var d_s = $("#d_s").val();
            var d_e = $("#d_e").val();
            var v_s = $("#v_s").val();
            var v_e = $("#v_e").val();            
            d_id = id;
            key = mac == '' ? key : key + '-' + mac;
            $.get("main.php", {cmd: "getdata", key: key, d_s: d_s, d_e: d_e, v_s: v_s, v_e: v_e, t: btn_index, id: id, dt: dt, id_temp: Math.random()}, function (data) {
                data = eval("(" + data + ")");
                if (data.error.length > 0)
                    alert(data.error);
                //alert(data.f);
                $("#down").attr("href", data.f);
                $("#down").append("下载数据：" + data.f);
                show_chart(data.lab, data.dat, tit, unit, 'div_sel');
            })
        }

        function btn_del2_click() {
            var key = getUrlParam('key');
            var d_s = $("#d_s").val();
            var d_e = $("#d_e").val();
            var v_s = $("#v_s").val();
            var v_e = $("#v_e").val(); 
            $.get("main.php", {cmd: 'deldata', d_s: d_s, d_e: d_e, v_s: v_s, v_e: v_e, key: key, id_temp: Math.random()}, function (data) {
                alert(data);
            })
        }
        
        function chart_ref() {
            $("#down").empty();
            var id = $("#sel").find("option:selected").val();
            var dt = $("#dt").datetimebox("getValue");
            var tit = $("#sel").find("option:selected").attr("oth");
            var key = $("#sel").find("option:selected").attr("key");
            var mac = $("#sel").find("option:selected").attr("mac");
            var unit = $("#sel").find("option:selected").attr("unit");            
            d_id = id;
            key = mac == '' ? key : key + '-' + mac;
            $.get("main.php", {cmd: "getdata", key: key, t: btn_index, id: id, dt: dt, id_temp: Math.random()}, function (data) {
                data = eval("(" + data + ")");
                if (data.error.length > 0)
                    alert(data.error);
                //alert(data.f);
                $("#down").attr("href", data.f);
                $("#down").append("下载数据：" + data.f);
                show_chart(data.lab, data.dat, tit, unit, 'container');
            })
        }
    </script>
</head>
<body>
<div>
    <select id="sel">
        <option value="1"  unit="°C"    key="ds18b20"         mac="" oth="ds18b20温度">1.ds18b20 室内温度</option>
        <option value="2"  unit="%"     key="dht11_humidity"  mac="" oth="dht11湿度">2.dht11 室内湿度</option>
        <option value="3"  unit="°C"    key="dht11_temp"      mac="" oth="dht11温度">3.dht11 室内温度</option>
        <option value="4"  unit="MPa"   key="bmp180_p"        mac="" oth="bmp180气压">4.bmp180 气压</option>
        <option value="5"  unit="lux"   key="bh1750"          mac="" oth="bh1750光照">5.bh1750 光照</option>
        <option value="6"  unit="°C"    key="dht11_temp2"     mac="" oth="dht11温度">6.dht11 室内温度</option>
        <option value="7"  unit="%"     key="dht11_humidity2" mac="" oth="dht11湿度">7.dht11 室内湿度</option>
        <option value="8"  unit="°C"    key="bmp180_temp"     mac="" oth="bmp180温度">8.bmp180 室内温度</option>
        <option value="9"  unit="ppm"   key="CO2__"           mac="5CCF7F0BC634" oth="二氧化碳">9.CO2 [MH-Z14A]</option>
        <option value="10" unit="ug/m3" key="pm1_0"           mac="5CCF7F0BC634" oth="pm1.0">10.PM1.0 [PMS5003]</option>
        <option value="11" unit="ug/m3" key="pm2_5"           mac="5CCF7F0BC634" oth="pm2.5">11.PM2.5 [PMS5003]</option>
        <option value="12" unit="ug/m3" key="pm10_"           mac="5CCF7F0BC634" oth="pm10">12.PM10 [PMS5003]</option>
		<option value="13"  unit="°C"    key="sht10_outsite_temp"      mac="" oth="sht10室外湿度">sht10 室外温度</option>
	    <option value="14"  unit="%"     key="sht10_outsite_humidity"  mac="" oth="sht10室外湿度">sht10 室外湿度</option>		
        <option value="20"  unit="ppm"  key="CO2__"           mac="18FE34DE7252" oth="二氧化碳">20.CO2 [MH-Z14A]</option>
        <option value="21" unit="ug/m3" key="pm1_0"           mac="18FE34DE7252" oth="pm1.0">21.PM1.0 [PMS5003]</option>
        <option value="22" unit="ug/m3" key="pm2_5"           mac="18FE34DE7252" oth="pm2.5">22.PM2.5 [PMS5003]</option>
        <option value="23" unit="ug/m3" key="pm10_"           mac="18FE34DE7252" oth="pm10">23.PM10 [PMS5003]</option>		
        <option value="30"  unit="ppm"  key="CO2ii"           mac="5CCF7F0BC634" oth="二氧化碳">30.CO2 [MH-Z18B]</option>
        <option value="31" unit="ug/m3" key="pm1_b"           mac="5CCF7F0BC634" oth="pm1.0">31.PM1.0 [ZH03A]</option>
        <option value="32" unit="ug/m3" key="pm25b"           mac="5CCF7F0BC634" oth="pm2.5">32.PM2.5 [ZH03A]</option>
        <option value="33" unit="ug/m3" key="pm10b"           mac="5CCF7F0BC634" oth="pm10">33.PM10 [ZH03A]</option>
        
    </select>
    <input id="dt" type="text" class="easyui-datetimebox">
    <select id="sel2">
        <option value="1">1h</option>
        <option value="3">3h</option>
        <option value="6">6h</option>
        <option value="12">12h</option>
        <option value="24">1d</option>
        <option value="72">3d</option>
        <option value="168">1w</option>
    </select>
    <input type="button" value="now" onclick="btn_t(99)">
    <input type="button" value="<-" onclick="btn_t(-1)">
    <input type="button" value="->" onclick="btn_t(1)">
    <input type="button" value="1h" onclick="btn_click(1)">
    <input type="button" value="3h" onclick="btn_click(2)">
    <input type="button" value="6h" onclick="btn_click(3)">
    <input type="button" value="12h" onclick="btn_click(4)">
    <input type="button" value="1d" onclick="btn_click(5)">
    <input type="button" value="3d" onclick="btn_click(6)">
    <input type="button" value="1w" onclick="btn_click(7)">
    <input type="button" value="1m" onclick="btn_click(8)">
    <input type="button" value="all" onclick="btn_click(9)">
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div style="font-size:small; ">
    <br>

    <div id="result"></div>
    <div id="div_del">
        <input id="txt1" type="text" value=".0" >
        <input id="chk2" type="checkbox" >数据后加(温度保留一位小数，光照保留两位小数)
        <input type="button" value="delete" onclick="btn_del_click();">
        <input id="chk1" type="checkbox" >点击直接删除
        <br>
        开始时间：
        <input id="d_s" type="text" value="" >
        结束时间：
        <input id="d_e" type="text" value="" >
        大于：
        <input id="v_s" type="text" value="" style="width:80px;" >
        小于：
        <input id="v_e" type="text" value="" style="width:80px;">
        <input type="button" value="清空" onclick="btn_cls_click();">
        <input type="button" value="查询" onclick="btn_sel_click();">
        <input type="button" value="删除" onclick="btn_del2_click();">
    </div>
    <div id="div_sel" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div style="color:#8E8E8E"> 开发平台: raspberry+nginx+php
        &nbsp;&nbsp;&nbsp;&nbsp;
        mail: 287378376@qq.com
    </div>
</div>
</body>
</html>
